<template>
    <div class="addbox">
        <div class="addtitle">
            添加
        </div>
        <div class="box"> 
            <div class="left-box">
                    <el-form
                        ref="ruleFormRef"
                        :model="ruleForm"
                        status-icon
                        :rules="rules"
                        label-width="120px"
                        class="demo-ruleForm"
                    >
                        <el-form-item label="类型" >
                            <el-radio-group v-model="ruleForm.type" class="ml-4">
                                <el-radio label="0" size="large">外来人员</el-radio>
                                <el-radio label="1" size="large">老师</el-radio>
                                <el-radio label="2" size="large">学生</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="访客名称" prop="username">
                        <el-input v-model="ruleForm.username"  autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="手机号" prop="mobile">
                        <el-input v-model="ruleForm.mobile" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="openid">
                        <el-input v-model="ruleForm.openid"  autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="身份证号" prop="card">
                        <el-input v-model="ruleForm.card" autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="车牌号">
                        <el-input v-model="ruleForm.carnumber"  autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="理由" prop="reason">
                        <el-input v-model="ruleForm.reason"  autocomplete="off" />
                        </el-form-item>
                        <el-form-item label="部门">
                            <el-cascader
                            v-model="value"
                            :options="options"
                            :props="props"
                            @change="handleChange"
                            />
                        </el-form-item>
                        <el-form-item label="进校时间" prop="starttime">
                            <el-date-picker
                                v-model="ruleForm.starttime"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                type="datetime"
                                placeholder="选择日期时间"
                                :shortcuts="shortcuts"
                            />
                        </el-form-item>
                        <el-form-item label="离校时间" v-if=" ruleForm.type=='1' || ruleForm.type=='2' ?false:true " prop="endtime">
                            <el-date-picker
                                v-model="ruleForm.endtime"
                                type="datetime"
                                value-format="YYYY-MM-DD HH:mm:ss"
                                placeholder="选择日期时间"
                                :shortcuts="shortcuts"
                            />
                        </el-form-item>
                        <el-form-item label="地区" >
                            <el-cascader
                            v-model="value2"
                            :options="region"
                            :props="props2"
                            @change="handleChanges"
                            />
                        </el-form-item>
                        <el-form-item label="是否去过高风险区域" >
                            <el-radio-group v-model="ruleForm.is_go_danger" class="ml-4">
                                <el-radio label="0" size="large">否</el-radio>
                                <el-radio label="1" size="large">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否接触过高风险区">
                            <el-radio-group v-model="ruleForm.is_contact_danger" class="ml-4">
                                <el-radio label="0" size="large">否</el-radio>
                                <el-radio label="1" size="large">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="是否离京">
                            <el-radio-group v-model="ruleForm.is_leave" class="ml-4">
                                <el-radio label="0" size="large">否</el-radio>
                                <el-radio label="1" size="large">是</el-radio>
                            </el-radio-group>
                        </el-form-item>
                        <el-form-item label="健康状态">
                            <el-radio-group v-model="ruleForm.is_health" class="ml-4">
                                <el-radio label="0" size="large">良好</el-radio>
                                <el-radio label="1" size="large">一般</el-radio>
                                <el-radio label="2" size="large">差</el-radio>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                
            </div>
            <div class="right-box">
                <el-form-item label="上传图片" prop="card">
                    <el-upload
                        class="upload-demo"
                        drag
                        action="http://visit.lening365.com/visit/api/minivisit/upload"
                        multiple
                    >
                        <el-icon class="el-icon--upload"><upload-filled /></el-icon>
                        <div class="el-upload__text">
                            将文件拖至此处 <em>点击上传</em>
                        </div>
                    </el-upload>
                </el-form-item>
                <el-form-item class="button">
                        <el-button @click="cancel">取消</el-button>
                        <el-button type="primary" @click="submit(ruleFormRef)">确认</el-button>
                </el-form-item>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import type { FormInstance ,FormRules} from 'element-plus'
import {getdepartment}  from '../../api/admin3';
import { ref,reactive ,onMounted} from 'vue';
import {visitoradd} from '../../api/admin3'
import {Trembling,throttle} from '../../utils/tool'
import { UploadFilled } from '@element-plus/icons-vue'
import { regionData, CodeToText } from 'element-china-area-data'
import { ElMessage } from 'element-plus'
import {useRouter} from 'vue-router';
const router = useRouter();
const ruleFormRef = ref<FormInstance>()
const ruleForm = reactive({
    type:'0',//来访类型 ：1 临时访问登记  2 在校生访问登记
    username: "", 
    mobile: "", 
    card: "", 
    carnumber: "", 
    starttime: "", 
    endtime: "" ,
    reason:"",
    department:"5",//部门
    travelcode:"",//行程码
    healthcode:"",//健康码
    nucleicacid:"", //核酸
    adduserid:763,// 添加人id 在sessionStorage中获取（登录时存的用户信息）
    openid:"",
    is_go_danger:"0",
    is_contact_danger:"0",
    is_leave:"0",
    is_health:"1",
    address:'',
    vaccination: ""
})


const rules = reactive<FormRules>({
    username: [
        { required: true, message: '请输入姓名', trigger: 'blur' }
    ],
    mobile: [
        { required: true, message: '请输入手机号', trigger: 'blur' }
    ],
    card: [
        { required: true, message: '请输入身份证号', trigger: 'blur' }
    ],
    reason: [
        { required: true, message: '请输入理由', trigger: 'blur' }
    ],
    starttime: [
        { required: true, message: '请输入选择进校时间', trigger: 'blur' }
    ],
    endtime: [
        { required: true, message: '请选择出校时间', trigger: 'blur' }
    ],
})
const radio1 = ref('1')
const radio2 = ref('1')
const radio3 = ref('1')
const radio4 = ref('0')
const value2:any = ref('')
const value:any = ref([])

const props ={
  value:'id',
  label:'name',
  children:'son'
}

const handleChange = (value:any) => {
    let res= value.length-1
    console.log(value)
    console.log(value[res])

    // ruleForm.department=value[res]
}



const submit:any=Trembling(async ()=>{
    if(!ruleFormRef.value) return
    await ruleFormRef.value.validate(async(valid:any, fields:any) => {
        if (valid) {
            let res: any = await visitoradd(ruleForm)
            console.log(666, res)
            if (res && res.code === 10000) {
                ElMessage({
                    message: '添加成功',
                    type: 'success',
                })
                
                // console.log(res)
                router.push("/table/drag-table");
            } else {
                ElMessage({
                    message: res.message,
                    type: 'error',
                })
            }
        } else {
            console.log('error submit!', fields)
        }
    })
   
},300)

let options :any= reactive([])
const getdep= async()=>{
    let res:any=await getdepartment()
    console.log(res)
    if(res.code==10000){
        Object.assign(options, res.data[0].son); 
        console.log(8888,options)
    }

}
const props2 ={
  value:'label',
  label:'label',
  children:'children'
}

const region = ref(regionData)



const handleChanges = (value2:any) => {
    let res= value2.length-1
    let res2= value2.length-2
    let res3= value2.length-3
    console.log(value2)
    

    ruleForm.address=`${value2[res]}${value2[res2]}${value2[res3]}`
    
}


const cancel=()=>{
    router.push('/visitor')
}

onMounted(()=>{
    getdep()
})

const shortcuts = [
  {
    text: '今日',
    value: new Date(),
  },
  {
    text: '昨日',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24)
      return date
    },
  },
  {
    text: '一周前',
    value: () => {
      const date = new Date()
      date.setTime(date.getTime() - 3600 * 1000 * 24 * 7)
      return date
    },
  },
]
</script>

<style scoped lang="less"> 
.addbox{
    width: 100%;
    height: 100%;
    // background-color: rebeccapurple;
    border-top: 1px solid #fff;
    .addtitle{
        font-weight: bold;
        font-size: 20px;
        margin-left: 20px;
        margin-top: 20px;
        border-top: 1px solid #fff;
        
    }
    .box{
        display: flex;
       margin-left: 30px;
       margin-top: 20px;
        // .left-box{
          
        //     // background-color: darkcyan;
        //     // height: 100px;
           
        // }
        .right-box{
            
            // background-color: rgb(33, 65, 65);
            // height: 100px;
            margin-left: 200px;
            width: 400px;
        }
    }
}
.demo-datetime-picker {
  display: flex;
  width: 100%;
  padding: 0;
  flex-wrap: wrap;
}
.demo-datetime-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-datetime-picker .block:last-child {
  border-right: none;
}
.demo-datetime-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
.el-form-item__content{
    width: 100% !important;
}
.upload-demo{
    width: 100%;
}
 :deep(.button) {
    margin-top: 80px;
    margin-left: 150px;
}

.el-cascader-node .el-radio{
 width: 100%;
height: 100%;
z-index: 10;
 position: absolute;
top: 10px;
 right: 10px;
}
:deep(.el-cascader-panel .el-radio__input){
 visibility: hidden;
}
:deep(.el-cascader-panel .el-cascader-node__postfix) {
top: 10px;
}
</style>